<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="background: black;">
		<canvas id="canvas" style="display: block; border:1px solid red ; margin: 0 auto;"></canvas>
 	<canvas id="watermark-canvas" style="display: none;margin: 0 auto;border: 1px solid darkblue;"></canvas>
 <input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display:block;margin:20px auto;width:800px"/>
	</body> 
		<!--
    context.drawImage(canvas,dx,dy);
    context.drawImage(canvas,dx,dy,dw,dh);
    context.drawImage(canvas,sxsy,sw,sh,dx,dy,dw,dh);
    
    	离屏canvas 将第二个canvas加载到第一个canvas上。||添加水印
    -->
	<script>
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		var slider =document.getElementById("scale-range");
		canvas.width =1200;
		canvas.height=760;
		
		var watermarkCanvas = document.getElementById("watermark-canvas");
		var watermarkContext = watermarkCanvas.getContext("2d");
		
		var scale = slider.value
		var image = new Image();
		image.src="../img/1920.jpg";
		image.onload =function(){
		//context.drawImage(image,0,0,canvas.width,canvas.height);//全屏
		drawImageByScale(scale);

                slider.onmousemove = function(){
                    scale = slider.value;
                    drawImageByScale( scale )
                }
            }
	
	//绘制水印
	watermarkCanvas.width=600;
	watermarkCanvas.height=100;
	 
	watermarkContext.font="bold 50px Arial";
	watermarkContext.lineWidth="2";
	watermarkContext.fillStyle="rgba(255,255,255,0.5)";
	watermarkContext.textBaseline="middle";
	watermarkContext.fillText("我是水印=百思不得姐",20,50)
	
	
		function drawImageByScale(scale){//图像缩放函数
		  var imageWidth = canvas.width*scale;
            var imageHeight = canvas.height*scale;
			
		   x = canvas.width /2 - imageWidth / 2
            y = canvas.height / 2 - imageHeight / 2

            context.clearRect( 0 , 0 , canvas.width , canvas.height );
            context.drawImage( image , x , y , imageWidth , imageHeight );
            context.drawImage(watermarkCanvas,canvas.width-watermarkCanvas.width,canvas.height-watermarkCanvas.height);
        }
		
	</script>
</html>
